<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
          <el-form ref="form" :model="form" :rules="rules" label-width="90px">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="客戶姓名" prop="customerName">
                  <el-input
                    disabled
                    v-model="form.customerName"
                    placeholder="請輸入客戶姓名"
                  >
                    <el-button
                      slot="append"
                      @click="open_dialog"
                      icon="el-icon-search"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="聯繫方式" prop="telphone">
                  <el-input
                    disabled
                    v-model="form.telphone"
                    placeholder="請輸入聯繫方式"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="郵箱" prop="email">
                  <el-input
                    disabled
                    v-model="form.email"
                    placeholder="請輸入郵箱"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="地址" prop="address">
                  <el-input
                    disabled
                    v-model="form.address"
                    placeholder="請輸入地址"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="邀約人" prop="inviterName">
                  <el-input
                    disabled
                    v-model="form.inviterName"
                    placeholder="請輸入邀約人"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="接待人" prop="receiverName">
                  <el-input
                    disabled
                    v-model="form.receiverName"
                    placeholder="請選擇接待人姓名"
                  >
                    <el-button
                      slot="append"
                      @click="open_dialog_receiverName"
                      icon="el-icon-search"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="預約時間" prop="reservationTime">
                  <el-date-picker
                    clearable
                    v-model="form.reservationTime"
                    type="datetime"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="請選擇預約時間"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="備註">
                  <el-input
                    type="textarea"
                    maxlength="100"
                    show-word-limit
                    :rows="2"
                    v-model="form.content"
                    placeholder="請輸入備註"
                  />
                  <!-- <editor v-model="form.content" :min-height="192" /> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-divider content-position="center">預約明細</el-divider>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24">
              <!-- 预约事项 -->
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAddBizCustomerReservationItem"
                >添加</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDeleteBizCustomerReservationItem"
                >删除</el-button
              >

              <el-table
                style="width: 100%"
                :data="bizCustomerReservationItemList"
                :row-class-name="rowBizCustomerReservationItemIndex"
                @selection-change="
                  handleBizCustomerReservationItemSelectionChange
                "
                ref="bizCustomerReservationItem"
              >
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column
                  label="序號"
                  align="center"
                  prop="index"
                  width="50"
                />
                <el-table-column label="預約事項" prop="reservationItem">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.reservationItem"
                      placeholder="請選擇預約事項"
                      clearable
                    >
                      <el-option
                        v-for="dict in dict.type.business_scope"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <!-- <el-table-column
              label="預約事項KEY"
              prop="reservationItem"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.reservationItem"
                  placeholder="請輸入預約事項"
                />
              </template>
            </el-table-column> -->
                <el-table-column label="備註" prop="remark">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.remark"
                      placeholder="請輸入備註"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <div style="text-align: center; margin-top: 16px">
            <el-button
              type="primary"
              :disabled="btn_disable"
              @click="submitForm('20')"
              >提 交</el-button
            >
            <el-button
              type="primary"
              :disabled="btn_disable"
              @click="submitForm('10')"
              >保 存</el-button
            >
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 選擇客戶  -->
    <el-dialog
      :visible.sync="dialog_if_customer"
      destroy-on-close
      :close-on-click-modal="false"
      width="1000px"
      append-to-body
    >
      <single-table
        :selected="selected_customer_id"
        @customer_detail="customer_detail"
        @customer_cancel="customer_cancel"
      >
      </single-table>
    </el-dialog>

    <!-- 選擇接待人  -->
    <el-dialog
      :visible.sync="dialog_if_receiver"
      destroy-on-close
      :close-on-click-modal="false"
      width="800px"
      append-to-body
    >
      <receiver-table
        :selected="selected_receiver_id"
        @out_detail="receiver_detail"
        @out_cancel="receiver_cancel"
      >
      </receiver-table>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getReservation, updateReservation } from "@/api/biz/reservation";
import singleTable from "@/components/biz/singleTable";
import receiverTable from "@/components/biz/receiverTable";
export default {
  name: "ReservationAdd",
  components: {
    singleTable,
    receiverTable,
  },
  dicts: ["reservation_matter", "business_scope", "sys_user_sex"],
  data() {
    return {
      // 遮罩层
      loading: false,
      btn_disable: false,
      // 表单參數
      form: {},
      // 表单校验
      rules: {},
      // 总条數
      total: 0,
      // 弹出层標题
      title: "",

      // 預約事項明細表格數据
      bizCustomerReservationItemList: [],

      // 選擇客戶詳細信息
      dialog_if_customer: false,
      selected_customer_id: "",
      // 選擇接待人詳細信息

      dialog_if_receiver: false,
      selected_receiver_id: "",
    };
  },
  created() {
    if (this.$route.query.id) {
      console.log(this.$route.query);
      this.get_detail(this.$route.query.id);
    }
  },
  activated() {
    if (this.$route.query.id) {
      this.get_detail(this.$route.query.id);
    }
  },
  methods: {
    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/reservation/index", name: "Reservation" };
        this.$tab.refreshPage(obj);
      });
    },
    get_detail(id) {
      getReservation(id).then((response) => {
        this.selected_customer_id = response.data.customerId;
        this.selected_receiver_id = response.data.receiverId;
        this.form = response.data;
        this.bizCustomerReservationItemList =
          response.data.bizCustomerReservationItemList;
      });
    },

    // 選擇客戶詳細信息----------------------------------
    open_dialog() {
      this.dialog_if_customer = true;
    },
    customer_detail(item) {
      this.selected_customer_id = item.id;

      this.form.customerCode = item.customerCode;
      this.form.customerId = item.id;
      this.form.customerName = item.customerName;
      this.form.telphone = item.telphone;
      this.form.address = item.address;
      this.form.email = item.email;
      this.dialog_if_customer = false;
    },
    // 關閉彈窗客戶
    customer_cancel() {
      this.dialog_if_customer = false;
    },
    // ----------------------------------------------------------

    // 選擇接待人詳細信息----------------------------------
    open_dialog_receiverName() {
      this.dialog_if_receiver = true;
    },

    receiver_detail(item) {
      this.selected_receiver_id = item.userId;

      this.form.receiverName = item.receiverName;
      this.form.receiverId = item.userId;

      this.dialog_if_receiver = false;
    },
    // 關閉彈窗客戶
    receiver_cancel() {
      this.dialog_if_receiver = false;
    },
    // ----------------------------------------------------------

    /** 預約事項明細添加按钮操作 */
    handleAddBizCustomerReservationItem() {
      let obj = {};
      obj.reservationItem = "";
      obj.reservationItemName = "";
      obj.remark = "";
      this.bizCustomerReservationItemList.push(obj);
    },
    /** 預約事項明細删除按钮操作 */
    handleDeleteBizCustomerReservationItem() {
      if (this.checkedBizCustomerReservationItem.length == 0) {
        this.$modal.msgError("請先選擇要删除的預約事項明細數据");
      } else {
        const bizCustomerReservationItemList =
          this.bizCustomerReservationItemList;
        const checkedBizCustomerReservationItem =
          this.checkedBizCustomerReservationItem;
        this.bizCustomerReservationItemList =
          bizCustomerReservationItemList.filter(function (item) {
            return checkedBizCustomerReservationItem.indexOf(item.index) == -1;
          });
      }
    },
    /** 复选框选中數据 */
    handleBizCustomerReservationItemSelectionChange(selection) {
      this.checkedBizCustomerReservationItem = selection.map(
        (item) => item.index
      );
    },
    /** 預約事項明細序號 */
    rowBizCustomerReservationItemIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },

    // 表单重置
    reset() {
      this.form = {
        customerId: null,
        customerCode: null,
        customerName: null,
        reservationType: null,
        inviterName: null,
        matter: null,
        content: null,
        reservationTime: null,
        receiver: null,
        telphone: null,
        email: null,
        receiverName: null,
        completeTime: null,
        reservationStatus: null,
        billStatus: null,
        billId: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        billCode: null,
        updateBy: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm(type) {
      console.log(this.form);
      console.log(this.bizCustomerReservationItemList);
      this.form.bizCustomerReservationItemList =
        this.bizCustomerReservationItemList;
      this.form.reservationStatus = type;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btn_disable = true;
          updateReservation(this.form)
            .then((response) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              this.$modal.msgSuccess("修改成功");
              this.$tab.closePage().then(() => {
                const obj = { path: "/reservation/index", name: "Reservation" };
                this.$tab.refreshPage(obj);
              });
            })
            .catch((err) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              console.log(err);
            });
        }
      });
    },
  },
};
</script>
  <style  >
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
  